<template>
	<view class="content">
		<view class="notice" @click="toNotDetail">
			<u-notice-bar :text="title"></u-notice-bar>
		</view>
		<view class="title">
			智慧社区
		</view>
		<view class="item-box">
			<u-icon name="heart-fill" labelPos="bottom" size="32px" label="健康管理" @click="toHea()"></u-icon>
			<u-icon  name="shopping-cart-fill" labelPos="bottom" size="32px" label="社区超市" @click="toShop()"></u-icon>
			<u-icon name="server-man" labelPos="bottom" size="32px" label="诉求触达" @click="toCom()"></u-icon>
		</view>
		<view class="title">
			社区资讯
		</view>
		<view class="news-box" v-for="i in newsArr" :key="i.newsID" @click="toCentent(i.newsID)" >
			<view class="news-img">
				<image :src="'http://127.0.0.1:3000'+i.img" mode=""></image>
			</view>
			<view class="news-content">
				<text class="content u-line-1">{{i.title}}</text>
				<text class="auth">{{i.create_name}} {{i.createTime | dateFormat}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userlist,
		newslist,
		annouce
	} from '@/common/http.api.js'
	export default {
		data() {
			return {
				title: 'Hello',
				annInfo: {},
				newsArr:[]
			}
		},
		onShow() {
			// console.log(this.$store.state);
			this.getAnnouce()
			this.getNewslist()
		},
		onPullDownRefresh() {
			this.getAnnouce()
			this.getNewslist()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
				uni.$showMsg('已刷新')
			},400)
		},
		methods: {
			toCentent(newsID){
				console.log(newsID);
				uni.navigateTo({
					url: `/pages/content/content?id=${newsID}`
				})
			},
			// 智慧社区个跳转
			toHea() {
				uni.navigateTo({
					url: `/pages/healthy/healthy`
				})
			},
			toShop() {
				uni.navigateTo({
					url: '/pages/shop/shop'
				})
			},
			toCom() {
				uni.navigateTo({
					url: '/pages/appeal/appeal'
				})
			},
			async getNewslist() {
				const res = await newslist()
				this.newsArr = res.data
			},
			// 获取公告
			async getAnnouce() {
				const res = await annouce()
				this.title = res.data.content
				this.annInfo = res.data
			},
			//点击跳转公告详情
			toNotDetail() {
				console.log('1');
				let info = JSON.stringify(this.annInfo)
				uni.navigateTo({
					url: `/pages/notdetail/notdetail?annInfo=${info}`
				})
			}

		}
	}
</script>

<style lang="scss">
	.notice {
		width: 100%;
	}

	.title {
		padding: 30rpx 0 10rpx 10rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.title::before {
		display: inline-block;
		content: '';
		width: 10rpx;
		border-radius: 5rpx;
		height: 35rpx;
		margin-right: 15rpx;
		background: linear-gradient(to left, #5866f5, #4492f0);
	}

	.item-box {
		margin: 0 auto;
		width: 85%;
		padding: 35rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		box-shadow: 0rpx 2rpx 7rpx 0 rgba(0,0,0,0.08);
	}
	.news-box{
		display: flex;
		padding: 0 15rpx;
		margin-bottom: 5rpx;
		border-bottom: 1rpx solid #eee;
	}
	.news-img{
		width: 200rpx;
		height: 200rpx;
		background-color: #000;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.news-content{
		display: flex;
		flex-direction: column;
		width: 500rpx;
		height: 200rpx;
		.content{
			// font-weight: bold;
			padding: 10rpx;
			font-size: 18px;
			height: 130rpx;
			width: 100%;
		}
		.auth{
			font-size: 12px;
			padding-left: 10rpx;
			line-height: 50rpx;
			height: 50rpx;
			width: 100%;
		}
	}
</style>
